ACE Weather Watch
:root{
--bg:#0b1220;
--card:#0f1a33;
--border:rgba(255,255,255,.10);
--text:#eaf0ff;
--muted:rgba(234,240,255,.72);
--muted2:rgba(234,240,255,.55);
--shadow: 0 10px 30px rgba(0,0,0,.35);
--radius:18px;
--accent:#7dd3fc;
--accent2:#a78bfa;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family:Arial,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
color:var(--text);
background: radial-gradient(1200px 600px at 10% 0%, rgba(125,211,252,.14), transparent 60%),
radial-gradient(900px 500px at 90% 10%, rgba(167,139,250,.12), transparent 55%),
var(--bg);
scroll-snap-type:y mandatory;
scroll-behavior:smooth;
}
.wrap{max-width:1700px;margin:0 auto;padding:18px 22px 42px;}
.cover,.page{min-height:100vh;scroll-snap-align:start;position:relative;}
.title{font-size:64px;line-height:1.05;font-weight:800;color:var(--text);text-align:center;margin:34px 0 14px;}
.logoRow{display:flex;justify-content:center;align-items:center;margin:8px 0 14px;}
.logo{height:72px;width:auto;filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));}
.dateBox{
margin:0 auto 16px;max-width:560px;
border:1px solid var(--border);border-radius:18px;
padding:14px 18px;font-size:34px;color:rgba(234,240,255,.92);text-align:center;
background: rgba(255,255,255,.05);
box-shadow: var(--shadow);
}
.toc{max-width:980px;margin:10px auto 0;}
.tocBox{border:1px solid var(--border);border-radius:18px;padding:14px 14px 8px;background: rgba(255,255,255,.05);box-shadow: var(--shadow);}
.tocItem{display:flex;justify-content:space-between;gap:14px;padding:12px 12px;border-radius:14px;text-decoration:none;color:rgba(234,240,255,.92);font-size:22px;border:1px solid transparent;}
.tocItem:hover{background: rgba(255,255,255,.05);border-color: rgba(255,255,255,.10);}
.tocItem .pno{min-width:120px;text-align:right;color:var(--muted2);font-size:16px;}
.page{padding:18px 0;border-top:none;}
.sheet{
position:relative;width:100%;
background: rgba(255,255,255,.05);
border:1px solid var(--border);
border-radius:18px;
box-shadow: var(--shadow);
margin:14px auto;max-width:1700px;
padding:18px 18px 72px;
min-height:calc(100vh - 28px);
overflow:hidden;
}
.sheet:before{
content:'';position:absolute;inset:-1px;
background: radial-gradient(600px 180px at 10% 0%, rgba(125,211,252,.10), transparent 60%),
radial-gradient(600px 220px at 90% 0%, rgba(167,139,250,.10), transparent 60%);
pointer-events:none;
}
.sheet > *{position:relative;}
.pageHead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:6px 0 12px;}
.pageTitle{grid-column:2;justify-self:center;text-align:center;font-size:30px;color:rgba(234,240,255,.95);font-weight:750;margin:0;}
.backWrap{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px;}
.back{
color:rgba(234,240,255,.92);text-decoration:none;font-size:20px;
border:1px solid var(--border);border-radius:12px;padding:6px 10px;
background: rgba(255,255,255,.06);line-height:1;box-shadow: var(--shadow);
}
.back:hover{background: rgba(255,255,255,.10);border-color: rgba(255,255,255,.18);}
.backTxt{font-size:14px;color:var(--muted2);}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;width:100%;}
.card{width:100%;border:1px solid var(--border);border-radius:18px;padding:8px;background: rgba(255,255,255,.04);box-shadow: 0 8px 22px rgba(0,0,0,.25);}
.card img{width:100%;height:auto;border-radius:14px;cursor:zoom-in;display:block;}
.footer{
position:absolute;left:18px;right:18px;bottom:14px;
display:flex;justify-content:space-between;align-items:center;
color:var(--muted2);font-size:17px;
border-top:1px solid rgba(255,255,255,.10);padding-top:10px;
}
.footerRight{display:flex;align-items:center;gap:10px;}
.footLogo{height:22px;width:auto;opacity:.92;filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));}
#ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9999;padding:0;margin:0}
#ov{align-items:center;justify-content:center}
#ov img{width:99vw;height:99vh;object-fit:contain;border-radius:0}
#ov .x{position:fixed;top:12px;right:16px;color:#fff;font-size:26px;cursor:pointer;user-select:none;padding:6px 10px;border-radius:10px;background:rgba(0,0,0,.35)}
@media (max-width:1100px){
.wrap{max-width:1100px}
.title{font-size:44px}
.dateBox{font-size:28px}
.tocItem{font-size:18px}
.tiles{grid-template-columns:1fr;}
}
ACE Weather Watch
28.01.2026
x
![]()
